<template>
  <div class="center yuma-map">
    <div class="map relative w100" id="map">
      <el-amap vid="amapDemo1" :center="center" :zoom="zoom" :mapStyle="mapStyle" :plugin="plugin">
        <!-- 在地图上标记点 -->
        <el-amap-marker
          v-for="(marker, index) in markers"
          :position="marker.position"
          :events="marker.events"
          :content="marker.content"
          :key="index"
          :icon="marker.icon"
        >
        </el-amap-marker>

        <!--轨迹线路-->
        <el-amap-polyline
          :editable="polyline.editable"
          :path="polyline.path"
          :events="polyline.events"
          strokeColor="#01A9D4"
          strokeOpacity="0.5"
          strokeWeight="4"
          fillColor="#002E87"
          fillOpacity="0.8"
        >
        </el-amap-polyline>
      </el-amap>

      <div class="map-title absolute tac bold">大户上报种植面积</div>
      <div class="map-num absolute tac bold c-fff">{{ info.val17 || 0 }} <span>亩</span></div>
      <div class="map-list absolute">
        <div class="flex align-center mt10">
          <img
            :src="imgUrl + '/profile/personinfo/2023/5/6/lang16_b2b3f06c42794e52ad822d66b273fb78.png'"
            class="img-lang"
          />其他种植户
        </div>
        <div class="flex align-center mt10">
          <img
            :src="imgUrl + '/profile/personinfo/2023/5/6/lang17_7868b599ff9743f88849eb6e64306697.png'"
            class="img-lang"
          />玉米种植户
        </div>
        <div class="flex align-center mt10">
          <img
            :src="imgUrl + '/profile/personinfo/2023/5/6/lang15_63f69a94f8944efba6ecc0419b1bc73e.png'"
            class="img-lang"
          />小麦种植户
        </div>
      </div>
    </div>
    <component :is="config.b1 ? config.b1 : 'fwzx'" :info="info" show @onClick="handleClick('b1', config.b1)" />

    <visualization-dialog
      :visible.sync="dialogVisible"
      card-size="2"
      :info="info"
      :name="name"
      :component-name="componentName"
      @onChange="handleUpdate"
    />
  </div>
</template>

<script>
import Fwzx from '@/views/agriculture/components/Fwzx'
import agricultureApi from '@/api/agriculture'
import VisualizationDialog from '@/views/agriculture/components/VisualizationDialog'

export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    config: {
      type: Object,
      default: () => {}
    }
  },
  components: { Fwzx, VisualizationDialog },
  data() {
    return {
      noticeList: [],
      form: {},
      mapStyle: 'amap://styles/darkblue', //修改地图的背景颜色
      center: '', // 中心位置
      zoom: 10,
      markers: [],
      //线路
      polyline: {
        path: []
      },
      // 窗口信息框
      plugin: [
        'ToolBar',
        {
          pName: 'Scale',
          events: {
            init(instance) {}
          }
        },
        {
          pName: 'OverView',
          events: {
            init(instance) {}
          }
        }
      ],
      imgUrl: process.env.VUE_APP_IMG_API,
      noticeContent: '',
      visibleDialog: false,
      dialogVisible: false,
      name: '',
      componentName: ''
    }
  },
  mounted() {
    let that = this
    that.markAndText()
  },
  methods: {
    //配置撒点和对应的数据信息
    markAndText() {
      if (this.info.list2) {
        this.center = this.info.list2[0].val.split(',')
        let markerData = [
          {
            icon: 'https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/5/6/lang15_63f69a94f8944efba6ecc0419b1bc73e.png',
            position: this.info.list2[0].val.split(',')
          },
          {
            icon: 'https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/5/6/lang16_b2b3f06c42794e52ad822d66b273fb78.png',
            position: this.info.list2[2].val.split(',')
          },
          {
            icon: 'https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/5/6/lang17_7868b599ff9743f88849eb6e64306697.png',
            position: this.info.list2[3].val.split(',')
          },
          {
            icon: 'https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/5/6/lang16_b2b3f06c42794e52ad822d66b273fb78.png',
            position: this.info.list2[4].val.split(',')
          }
        ]
        let markers = []
        markerData.forEach((item, i) => {
          markers.push({
            position: item.position,
            icon: item.icon
            // content:'<div class="prompt">${ 111 }</div>',
          })
        })
        let arry = []
        for (var i = 0; i < this.info.list1.length; i++) {
          var str = this.info.list1[i].val.split(',')

          arry.push(str)
        }
        this.markers = markers
        this.polyline.path = arry
      } else {
        this.center = [115.15461, 36.29211]
        this.markers = {
          icon: 'https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/5/6/lang15_63f69a94f8944efba6ecc0419b1bc73e.png',
          position: [115.15461, 36.29211]
        }
      }
    },
    handleClick(name, componentName) {
      this.name = name
      this.componentName = componentName
      this.dialogVisible = true
    },
    handleUpdate(value) {
      agricultureApi.personalEdit({ templateConfig: value, visualizationType: 100 }).then((res) => {
        this.dialogVisible = false
        this.$message.success('修改成功')
        this.$emit('onChange')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.center {
  width: calc(100vw - 14.4rem);
  margin-left: 0.1rem;
  margin-right: 0.1rem;

  .img-lang {
    width: 0.2rem;
    height: 0.24rem;
  }

  .mt10 {
    margin-top: 0.1rem;
  }

  .map {
    width: calc(100vw - 14.4rem);
    height: calc(100% - (calc((100vh - 1.2rem) / 3)));
    padding-top: 0.2rem;

    .map-list {
      left: 0.25rem;
      bottom: 0.25rem;
      z-index: 999;
    }

    .map-title {
      z-index: 999;
      left: 0;
      top: 0;
      width: 2.12rem;
      height: 0.48rem;
      background: #00cdff;
      line-height: 0.48rem;
      color: #000f67;
      font-size: 0.22rem;
    }

    .map-num {
      z-index: 999;
      width: 2.12rem;
      height: 0.74rem;
      background: linear-gradient(0deg, rgba(0, 96, 255, 0.4), rgba(0, 96, 255, 0));
      left: 0;
      top: 0.48rem;
      line-height: 0.74rem;
      font-size: 0.24rem;
      opacity: 1;

      span {
        font-size: 0.16rem;
      }
    }
  }

  .header {
    background-size: 100% 100%;
    font-size: 0.18rem;
    height: 0.42rem;
    background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang7_a953852ebaf143d2994fe879e106efda.png');
    background-repeat: no-repeat;
    background-position-x: center;
    box-sizing: border-box;

    .img {
      width: 0.16rem;
      height: 0.14rem;
      margin-left: 0.1rem;
      margin-right: 0.15rem;
    }

    .img1 {
      width: 0.36rem;
      height: 0.16rem;
      margin-right: 0.1rem;
    }
  }

  .img2 {
    height: 0.08rem;
  }
}
</style>